<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <el-button type="primary" size="mini" @click="addCourse">新增</el-button>
      </el-col>
      <el-col :span="8" :offset="8">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          @change="searchChan"
          v-model="input"
        ></el-input>
      </el-col>
    </el-row>
    <el-drawer
      title="课程"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <div style="max-height:650px;overflow-y:auto">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="课程名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="折后价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="课程类型">
            <el-select v-model="form.typecid" placeholder="请选择课程类型">
              <el-option
                v-for="(item,index) in calssify"
                :key="index"
                :label="item.type"
                :value="item.type "
                v-show="index!=0"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程库存">
            <el-input v-model="form.inventory"></el-input>
          </el-form-item>
          <el-form-item label="课程作者">
            <el-input v-model="form.author"></el-input>
          </el-form-item>
          <el-form-item label="课程年份">
            <el-input v-model="form.year"></el-input>
          </el-form-item>
          <el-form-item label="课程图片">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:2020/question/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="avatar"
            >
              <img
                v-if="imageUrl"
                :src="form.id?'http://localhost:2020/uploads/'+imageUrl:imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="课程专业">
            <el-select v-model="form.majorcid" placeholder="请选择专业">
              <el-option
                v-for="(item,index) in major"
                :key="index"
                :label="item.major"
                :value="item.major"
                v-show="index!=0"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="折前价格">
            <el-input v-model="form.Originalprice"></el-input>
          </el-form-item>
          <el-form-item label="学习人数">
            <el-input v-model="form.studyNum"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-table :data="tableData" border style="width: 100%;margin-top:10px" max-height="590">
      >
      <el-table-column type="index" width="50" label="#"></el-table-column>
      <el-table-column prop="name" label="课程名称" width="150"></el-table-column>
      <el-table-column prop="price" label="折后价格" width="120"></el-table-column>
      <el-table-column prop="typecid" label="课程类型" width="120"></el-table-column>
      <el-table-column prop="inventory" label="课程库存" width="120"></el-table-column>
      <el-table-column prop="author" label="课程作者" width="120"></el-table-column>
      <el-table-column prop="year" label="课程年份" width="120"></el-table-column>
      <el-table-column label="图片" width="120" prop="avatar">
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="50"
            :src="'http://localhost:2020/uploads/'+tableUrl[scope.$index]"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="majorcid" label="课程专业" width="120"></el-table-column>
      <el-table-column prop="Originalprice" label="折前价格" width="120"></el-table-column>
      <el-table-column prop="studyNum" label="学习人数" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="delCourse(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      input: "",
      form: {},
      drawer: false,
      direction: "rtl",
      imageUrl: "",
      avatar: ""
    };
  },
  computed: {
    ...mapState("commodity", ["tableData", "total", "pageSize", "curr"]),
    ...mapState("classify", ["calssify"]),
    ...mapState("major", ["major"]),
    tableUrl() {
      if (this.tableData.length == 0) {
        return;
      }
      let img = [];
      for (var i = 0; i < this.tableData.length; i++) {
        img.push(this.tableData[i].avatar);
      }
      return img;
    }
  },
  methods: {
    ...mapMutations("commodity", [
      "setSearch",
      "setpageSize",
      "setcurrentPage"
    ]),
    ...mapActions("commodity", [
      "getQuestions",
      "saveQuestions",
      "xgQuestions",
      "delQuestions"
    ]),
    ...mapActions("classify", ["getClassify"]),
    ...mapActions("major", ["getMajor"]),
    searchChan() {
      if (this.input == "") return;
      this.setSearch(this.input);
      this.setcurrentPage(1);
      this.getQuestions();
    },
    //新增
    addCourse() {
      this.drawer = true;
    },
    //修改
    handleClick(row) {
      this.imageUrl = row.avatar;
      this.form = { ...row };
      this.drawer = true;
      // console.log(row);
    },
    //删除
    delCourse(id) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.delQuestions(id);
          await this.getQuestions();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //确定
    onSubmit() {
      if (this.form.id) {
        this.xgQuestions({ ...this.form, avatar: this.avatar });
      } else {
        this.saveQuestions({ ...this.form, avatar: this.avatar });
      }
      this.getQuestions();
      this.drawer = false;
    },
    handleAvatarSuccess(res, file) {
      this.avatar = res.data.filename;
      this.getQuestions();
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSizeChange(val) {
      this.pageSize(val);
      this.getQuestions();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.setcurrentPage(val);
      this.getQuestions();
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    this.getQuestions();
    this.getClassify();
    this.getMajor();
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>